<template>
    <div class="map_tools_content">
        <div
            v-for="(item, index) in toolsList"
            :key="index"
            @click="toolsItemClick(item)"
            class="map_tools_content_icon"
            :style="{
                background: item.isActive ? '#f9e79f' : '',
                color: item.isActive ? 'black' : '',
            }"
        >
            <SvgIcon
                :icon-class="item.iconName"
                class="icon_class"
                width="32px"
                height="32px"
            />
            <span>{{ item.itemName || item.defaultName }}</span>

            <div class="map_tools_content_icon_left">
                <slot
                    name="map_tools_item"
                    :item="item.children || ({} as any)"
                >
                </slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { mapInitData } from "@/components/map/map";

import { markHooks } from "@/components/map/hooks/markHooKs";
import { hotAreaHooks } from "@/components/map/hooks/hotAreaHooks";
import { gridHooks } from "@/components/map/hooks/gridHooks";
import { trackHooks } from "@/components/map/hooks/trackHooks";
import { userTrackHooks } from "@/components/map/hooks/userTrackHooks";
import { layerHooks } from "@/components/map/hooks/layerHooks";
import type {
    toolsList,
    toolsListItem,
} from "@/components/map/components/mapTools/index";

const props = defineProps({
    mapInit: {
        required: true,
        default: {} as mapInitData,
    },
    isShowTools: {
        type: Boolean,
        required: true,
        default: false,
    },
    toolsList: {
        required: true,
        default: [] as toolsList,
    },
});

let layer: any;
let polyline: any;
let trackObj: any;
let markerMoving: any;
let passedPolyline: any;
let trackData: any;
let satellite: any;
let RoadNet: any;
let { map, AMapObj, heatmap } = props.mapInit;

// 工具栏点击事件
const toolsItemClick = (item: toolsListItem) => {
    item.isActive = !item.isActive;
    switch (item.defaultName) {
        case "mark标记":
            toolsMarkClick(item);
            break;
        case "热力图":
            toolsHotClick(item);
            break;
        case "防控轨迹":
            toolsTrackClick(item);
            break;
        case "地图图层":
            toolsLayerClick(item);
            break;
        case "网格显示":
            toolsGridClick(item);
            break;
        case "遮罩层切换":
            toolsMaskClick(item);
            break;
        case "实时作业轨迹":
            toolsRealTraJectoryClick(item);
            break;
        case "用户作业轨迹":
            toolsUserTraJectoryClick(item);
            break;
        default:
            break;
    }
};

// 生成海量点
const toolsMarkClick = async (item: toolsListItem) => {
    if (item.isActive) {
        layer = await markHooks(props.mapInit).addMostMarkArr();
    } else {
        if (layer) {
            map.removeLayer(layer);
        }
    }
};

// 热力图
const toolsHotClick = async (item: toolsListItem) => {
    if (item.isActive) {
        await hotAreaHooks(props.mapInit).initHotArea();
        heatmap.show();
    } else {
        heatmap.hide();
    }
};

// 防控轨迹 工具点击
const toolsTrackClick = async (item: toolsListItem) => {
    if (item.isActive) {
        polyline = await trackHooks(props.mapInit).addTrack();
    } else {
        if (polyline && polyline?.length > 0) {
            polyline.forEach((item: any) => {
                item.setMap(null);
            });
        }
    }
};

// 图层工具点击
const toolsLayerClick = (item: toolsListItem) => {
    item.children.show = !item.children.show;
};

// 网格显示
const toolsGridClick = (item: toolsListItem) => {
    // gridHooks(props.mapInit).drawGrid();
    // console.log(item);
};

// 遮罩层切换
const toolsRealTraJectoryClick = (item: toolsListItem) => {
    console.log(item);
};

// 查看实时作业轨迹
const toolsMaskClick = (item: toolsListItem) => {
    console.log(item);
};

// 查看用户作业轨迹
const toolsUserTraJectoryClick = async (item: toolsListItem) => {
    item.children.show = item.isActive;
    if (!item.isActive) {
        clearToolsUserTraJectory(item);
    }
};

// 清除用户作业轨迹
const clearToolsUserTraJectory = async (item: toolsListItem) => {
    if (trackObj && trackObj?.length > 0) {
        trackObj.forEach((item: any) => {
            item.PolylineItem.setMap(null);
        });
    }
    if (markerMoving) {
        trackObj.forEach((item: any) => {
            if (item.PolylineItem) item.PolylineItem.setMap(null);
        });
        markerMoving.stopMove();
        trackData = [];
        markerMoving.setMap(null);
        passedPolyline.setMap(null);
    }
};

// ...............
// 初始化图层对象
const isInitLayer = () => {
    let flag = props.toolsList.find((ele) => {
        return ele.defaultName === "地图图层" && ele.isShow;
    });
    if (flag) {
        let obj = layerHooks(props.mapInit).initLayer();
        satellite = obj.satellite;
        RoadNet = obj.RoadNet;
    }
};

// 切换图层
const changeLayer = (name: string) => {
    if (name === "卫星图") {
        satellite.setMap(props.mapInit.map);
        RoadNet.setMap(null);
    }
    if (name === "卫星混合图") {
        satellite.setMap(props.mapInit.map);
        RoadNet.setMap(props.mapInit.map);
    }
    if (name === "地形图") {
        satellite.setMap(null);
        RoadNet.setMap(null);
    }
};

// 查询用户作业轨迹
const queryToolsUserTraJectory = async (item: toolsListItem) => {
    clearToolsUserTraJectory(item);
    trackObj = await userTrackHooks(props.mapInit).getMovingTrack();
    trackData = [] as any;
    trackObj.forEach((item: any) => {
        trackData = trackData.concat(item.ele);
    });
    let data = await userTrackHooks(props.mapInit).movingTrack(trackData);
    markerMoving = data.markerMoving;
    passedPolyline = data.passedPolyline;
};

onMounted(() => {
    isInitLayer();
});

// 子组件抛出的事件
defineExpose({
    changeLayer,
    queryToolsUserTraJectory,
});
</script>

<style lang="scss" scoped>
.map_tools_content {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 20px;
    right: 10px;
    border-radius: 16px;
    font-size: 16px;
    padding: 14px 0;
    background-color: #fff;
    border: 1px solid #c0c4cc;
    color: #c0c4cc;

    /* max-height: 260px;
    overflow-y: scroll; */

    &_icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: scale(0.8, 0.9); /* 然后缩小至80% */
        transform-origin: 50% 0; /* 可能需要指定缩放原点以确保准确缩放 */

        padding: 4px 0;
        border-radius: 16px;
        &:first-child {
            margin-top: 0;
        }
        .icon_class {
            cursor: pointer;
            border-radius: 50%;
        }
        span {
            margin-top: 4px;
            font-size: 12px; /* 先设置至少为12px */
            cursor: pointer;
            display: inline-block;
            text-align: center;
            transform: scale(0.9); /* 然后缩小至80% */
            transform-origin: 50% 0; /* 可能需要指定缩放原点以确保准确缩放 */
        }
        &_left {
            position: relative;
        }
    }
}
</style>
